<template>
  <div class="alarmAmount-root">
    <formTitleVue
      title="共性问题信息"
      :selectOptions="selectOptions"
    />
    <el-table
      :data="dataList"
      class="table"
      height="30vh"
      border
      @row-click="rowClick"
      style="width: 100%">
      <el-table-column
        class="column-point"
        v-for="item in tableColumnList"
        :prop="item.prop"
        :label="item.label">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import VTable from "@/components/VTable/index";
  import formTitleVue from "@/components/FormTitle/formTitle.vue";
  import { overviewPublicProblem } from "@/api/risk/cityWaringResult";
    export default {
        name: "publicProblem",
      components: {
        formTitleVue,
        VTable
      },
      props: {
        yearOptions:{},
      },
      data() {
        return {
          tableColumnList:[
            {prop:"threeTargetName", label:"指标"},
            {prop:"rate", label:"比例"},
            {prop:"cityName", label:"城市"}
          ],
          dataList:[],
          selectOptions: [
            {
              key:"year",
              selectValue: "",
              options: [],
              changeFn: this.selectChange1,
            },

          ],
          searChForm: {
            year:"",
          },
        }
      },
      watch:{
        'yearOptions':{
          handler(newVal, oldVal) {
            this.selectOptions.forEach(t=> {
              if (t.key == 'year') {
                t.options = newVal
              }
            })
          },
          deep: true,
          immediate: true
        },
      },
      methods: {
        rowClick(row){
          this.$router.push({
          // name: 'cityDetailDetail',
          path:'/public/cityAnalysis/overview/publicProbleDetail',
          query: {
            year:this.searChForm.year,
          },
        })
        },
        selectChange1(item){
          this.searChForm.year = item
          this.search()
        },
        search() {
          this.fetch({
            ...this.searChForm,
          })
        },
        fetch(params = {}) {
          overviewPublicProblem(params).then(res => {
            if (res.code == 200) {
              console.log("overviewPublicProblem=======",res.data)
              this.dataList = res.data
            } else {
              this.$message({
                message: this.$t('tips.systemException'),
                type: 'error'
              })
            }
          }).finally(final => {
          })
        },
        init(){
          this.selectOptions[0].selectValue = this.selectOptions[0].options[0].value
          this.searChForm.year = this.selectOptions[0].options[0].value
          this.search()
        },
      },
      mounted() {
        this.init()
      },
    }
</script>

<style  lang="scss" scoped>
  ::v-deep .el-table__row{
    cursor: pointer;
  }
</style>
